<template>
  <div class="basemap">
    <div id="map" class="map"></div>
  </div>
</template>

<script>
import changeLonLat from "@/utils/changeLonLat";

export default {
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
    this.addImage1();
  },
  methods: {
    initMap() {
      // 重庆市经纬度 107.820952,29.839539
      const cqp = this.$L.latLng(29.580744,106.455527);

      this.map = this.$L
        .map("map", {
          // 版权控件
          attributionControl: false,
          // 缩放控件
          zoomControl: false,
        })
        .setView(cqp, 15);

      // 天地图token
      const tdtToken = "810e2cf8deac0489c6bb8ee29e5d9591";
      // 天地图 影像底图
      const wmtsImg =
        "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
        tdtToken;

      this.$L
        .tileLayer(wmtsImg, {
          maxZoom: 18,
        })
        .addTo(this.map);
    },
    addImage1() {
      const imgUrl = "@/assets/img/ciqikou.jpg",
        imgBouns = changeLonLat.changeLonLat([
          [106.455527, 29.580744],
          [106.465527, 29.590744],
        ]);
      this.$L
        .imageOverlay(imgUrl, imgBouns, {
          alt: "磁器口图片",
          // 如果为 true，当单击或悬停时，图像图层将发出 鼠标事件
          interactive: false,
        })
        .addTo(this.map);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>